<!-- 内边距 -->
<template>
    <layout-pane label="内边距">
        <div class="row-item">
            <si-input-number
                v-model="widget.widgetData.eles.style['padding-left']"
                label="左边"
                unit="px"
            />
            <si-input-number
                v-model="widget.widgetData.eles.style['padding-right']"
                label="右边"
                unit="px"
            />
        </div>
        <div class="row-item">
            <si-input-number
                v-model="widget.widgetData.eles.style['padding-bottom']"
                label="下边"
                unit="px"
            />
            <si-input-number
                v-model="widget.widgetData.eles.style['padding-top']"
                label="上边"
                unit="px"
            />
        </div>
    </layout-pane>
</template>

<script>
import { defineComponent, toRefs } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
import { SiInputNumber } from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'RowPadding',
    components: {
        LayoutPane,
        SiInputNumber
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        return {
            widget
        }
    }
})
</script>

<style lang="less" scoped>
.row-item {
    & + .row-item {
        margin-top: 10px;
    }
}
</style>